<script>
import store from "@/store"
import { userActionType } from "@/store/modules/user"
import { getShowImage } from "@/utils"

export default {
  name: "avatar",
  methods: { getShowImage },
  data() {
    return {
      userIcon: "",
      nickName: "",
    }
  },
  props: {
    width: {
      type: String,
      default: "100rpx",
    },
    height: {
      type: String,
      default: "100rpx",
    },
    borderRadius: {
      type: String,
      default: "50%",
    },
    userIconProp: String,
    nickNameProp: String,
  },
  created() {
    store.dispatch(userActionType.action.userInfo).then((userInfo) => {
      this.userIcon = userInfo.userIcon
      this.nickName = userInfo.nickName
    })
  },
}
</script>

<template>
  <view class="component" :style="{ width: width, height: height, 'border-radius': borderRadius }">
    <image class="avatar-image" v-if="userIconProp || userIcon" :src="getShowImage(userIconProp || userIcon)"></image>
    <!-- 没有头像则取昵称的第一个字符 -->
    <view class="avatar-image avatar-text d-flex align-center justify-center" v-else>{{ nickNameProp[0] || nickName[0] }} </view>
  </view>
</template>

<style scoped lang="scss">
.component {
  overflow: hidden;
  .avatar-image {
    width: 100%;
    height: 100%;
  }
  .avatar-text {
    background: #3c3c3c;
    font-size: 44rpx;
    color: #fff;
  }
}
</style>
